<!-- 人才构成统计组件的封装 -->
<template>
  <div class="container">
    <!-- 头部 -->
    <echartsHeader title="人才构成统计"></echartsHeader>
    <div class="echarts_container">
      <el-row :gutter="8" type="flex" justify="space-between">
        <el-col :span="8">
          <blockContent title="求职者性别">
            <!-- id不要重复 -->
            <div id="echarts_sex"></div>
          </blockContent>
          <blockContent title="求职者年龄" class="mt16">
            <!-- id不要重复 -->
            <div id="echarts_age"></div>
          </blockContent>
          <blockContent title="求职者学历" class="mt16">
            <!-- id不要重复 -->
            <div id="echarts_education"></div>
          </blockContent>
        </el-col>
        <el-col :span="8" class="middle_col">
          <el-row :gutter="16" type="flex" justify="space-between">
            <el-col :span="12" v-for="(item,index) in resumeNum" :key="index">
              <div class="grid-content bg-purple">
                <Statistics :title="item.title" :number="item.number" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <!-- map 地图 -->
            <div class="map_card">
              <span class="map_header">求职者分布</span>
              <div class="map_container">
                <Map v-if="flag" :mapData="mapData" :name="mapName" :max="mapMax"></Map>
              </div>
            </div>
          </el-row>
        </el-col>
        <el-col :span="8">
          <blockContent title="求职者行业top10">
            <!-- id不要重复 -->
            <div id="echarts_bar1"></div>
          </blockContent>
          <blockContent title="求职者职位top10" class="mt16">
            <!-- id不要重复 -->
            <div id="echarts_bar2"></div>
          </blockContent>
          <blockContent title="求职者薪酬" class="mt16">
            <!-- id不要重复 -->
            <div id="echarts_salary"></div>
          </blockContent>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { MyEcharts } from '../utils/echart-utils.js';
import { selectareas } from '../../../../api/dataCenter.js';
import { findDictByCode } from '../../../../api/index.js';
import { dynamicSex, sexRate, educationRate, distribute, tradeTopTen, jobTopTen, salary } from '../../../../api/jobHuntingStatistics.js';
export default {
  name: '',
  data () {
    return {
      resumeNum: [
        { title: '注册简历数', number: 0 },
        { title: '活跃简历数', number: 0 },
      ],
      // 地图数据
      mapData: [],
      mapName: [],
      mapMax: 0,
      // 环形图~求职者性别
      sex: {
        config: true,
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: ['男', '女']
        // },
        color: ['#5789F1', '#56CEA3'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              { value: 0, name: '男' },
              { value: 0, name: '女' },
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                // formatter: '{b}：{c} ({d}%)',      // 标签文本
                formatter: '{b}：{d}%',
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 环形图~求职者年龄
      age: {
        config: true, // 如果为true 则展示自己的样式 否则用默认样式
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#56CEA3', '#596B90', '#EAB41A', '#DD6053'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              // { value: 56, name: '16-20岁' },
              // { value: 44, name: '21-30岁' },
              // { value: 88, name: '31-40岁' },
              // { value: 23, name: '41-50岁' },
              // { value: 32, name: '51-60岁' }
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                formatter: '{b}：{d}%',      // 标签文本
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 环形图~求职者学历
      education: {
        config: true,
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '<div>' + params.marker + params.name + ' :&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#56CEA3', '#596B90', '#EAB41A', '#DD6053', '#68BFE5', '#8D5BB5', '#A56851', '#1E9091'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                formatter: '{b}：{d}%',      // 标签文本
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 环形图~求职者行业top10
      bar1: {
        config: true,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: function (params) {
          //   return '<div>' + params.marker + params.name + ' :&nbsp;' + params.percent + '%' + '</div>';
          // },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        legend: {
          orient: 'vertical',
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom',     //可设定图例在上、下、居中
          padding: [0, 50, 5, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 12
          },
          data: ['人数']
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 12
            },
          },
          //设置轴线的属性  x轴最下面的轴线设置
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, .50)",
              margin: 10,
              width: 1
            }
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, .25)",
              fontSize: 12
            }
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 12
            },
          },
          //设置轴线的属性  x轴最下面的轴线设置
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, .50)"
            }
          }
        },
        color: ['#5789F1'],
        series: [
          {
            name: '人数',
            type: 'bar',
            // itemStyle: {
            //   color: 'blue'
            // },
            data: []
          },
        ]
      },
      // 环形图~求职者top10
      bar2: {
        config: true,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: function (params) {
          //   return '<div>' + params.marker + params.name + ' :&nbsp;' + params.percent + '%' + '</div>';
          // },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        legend: {
          orient: 'vertical',
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom',     //可设定图例在上、下、居中
          padding: [0, 50, 5, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 12
          },
          data: ['人数']
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 12
            },
          },
          //设置轴线的属性  x轴最下面的轴线设置
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, .50)",
              margin: 10,
              width: 1
            }
          },
          // 设置图标里面的线
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, .25)",
              fontSize: 12
            }
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            // interval: 0,// y轴隔行
            // rotate: 30,  // y轴字体倾斜
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 12
            },
          },
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, .50)',
            }
          }
          // splitLine: {
          //   lineStyle: {
          //     type: "dashed",
          //     color: "rgba(255, 255, 255, .25)",
          //     fontSize: 12
          //   }
          // },
        },
        color: ['#5789F1'],
        series: [
          {
            name: '人数',
            type: 'bar',
            // smooth: false,   //关键点，为true是不支持虚线的，实线就用true
            // itemStyle: {
            //   normal: {
            //     lineStyle: {
            //       width: 2,
            //       type: 'dotted'  //'dotted'虚线 'solid'实线
            //     }
            //   }
            // },
            data: []
          },
        ]
      },
      // 环形图~求职者薪酬
      salary: {
        config: true,
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return '<div>' + params.marker + params.name + ' :&nbsp;' + params.value + "&nbsp;" + params.percent + '%' + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        color: ['#5789F1', '#56CEA3', '#596B90', '#EAB41A', '#DD6053', '#68BFE5'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            radius: ['50%', '70%'],
            data: [
              // { value: 56, name: '2k以下' },
              // { value: 44, name: '2k-4k' },
              // { value: 88, name: '4k-6k' },
              // { value: 23, name: '6k-8k' },
              // { value: 32, name: '8k-10k' },
              // { value: 65, name: '10k以上' },
            ],
            label: {
              normal: {
                // position: 'inside',     // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                formatter: '{b}：{d}%',      // 标签文本
                textStyle: {
                  color: "rgba(255, 255, 255, .75)",
                  fontSize: 10
                }
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      flag: false,
      sexRateData: null, //简历求职者年龄占比
    }
  },
  components: {
  },
  mounted () {
    this.getData();
    // setTimeout(() => {
    //   this.optionChart();
    // }, 500);
  },
  methods: {
    optionChart () {
      let option_sex = MyEcharts.EchartsOption.pie('', '', this.sex);
      MyEcharts.initChart(option_sex, 'echarts_sex');
      // 年龄
      let option_age = MyEcharts.EchartsOption.pie('', '', this.age);
      MyEcharts.initChart(option_age, 'echarts_age');
      // 学历
      let option_education = MyEcharts.EchartsOption.pie('', '', this.education);
      MyEcharts.initChart(option_education, 'echarts_education');
      // 行业top10
      let option_bar1 = MyEcharts.EchartsOption.bar('', '', this.bar1);
      MyEcharts.initChart(option_bar1, 'echarts_bar1');
      // 求职者top10
      let option_bar2 = MyEcharts.EchartsOption.bar('', '', this.bar2);
      MyEcharts.initChart(option_bar2, 'echarts_bar2');
      // 薪酬
      let option_salary = MyEcharts.EchartsOption.pie('', '', this.salary);
      MyEcharts.initChart(option_salary, 'echarts_salary');
    },
    // 获取数据
    getData () {
      let totalActiveSexData = null;  //简历总数，简历活跃数，性别占比
      let sexRateData = null; //简历求职者年龄占比
      let educationRateData = null; //求职者学历占比
      let mapData = null; //求职者分布
      let salaryData = null;  // 求职者薪酬
      Promise.all([dynamicSex(), sexRate(), educationRate(), distribute(), tradeTopTen(), jobTopTen(), salary()]).then(data => {
        console.log(data, '获取求职者')
        totalActiveSexData = data[0];
        // 注册简历数
        this.resumeNum[0].number = totalActiveSexData.data.resumeCount;
        // 活跃简历数
        this.resumeNum[1].number = totalActiveSexData.data.dynamic;
        this.sex.series[0].data[0].value = totalActiveSexData.data.boyCount;
        this.sex.series[0].data[1].value = totalActiveSexData.data.girlCount;
        // 简历求职者年龄占比及处理
        sexRateData = data[1];
        this.handleSexRateData(sexRateData);
        //求职者学历占比及处理
        educationRateData = data[2];
        this.handleEducationRateData(educationRateData);
        // 求职者分布及处理
        mapData = data[3];
        this.handleMapData(mapData);
        //求职者行业
        data[4].data.map(item => {
          this.bar1.yAxis.data.push(item.tradeText)
          this.bar1.series[0].data.push(Number(item.tradeCount))

        })
        this.bar1.series[0].data = this.bar1.series[0].data.reverse()
        this.bar1.yAxis.data = this.bar1.yAxis.data.reverse()
        //求职者职位
        data[5].data.map(item => {
          this.bar2.yAxis.data.push(item.jobText)
          this.bar2.series[0].data.push(Number(item.jobCount))

        })
        this.bar2.series[0].data = this.bar2.series[0].data.reverse()
        this.bar2.yAxis.data = this.bar2.yAxis.data.reverse()
        console.log(data[4], 'data[4]')
        // 求职者薪酬及处理
        salaryData = data[6];
        this.handleSalaryData(salaryData)

        this.optionChart();
      })
        .catch(error => {
          console.log(error, '错误')
        })
    },
    // 处理简历求职者年龄占比
    handleSexRateData (sexRateData) {
      this.age.series[0].data = Object.keys(sexRateData.data).map(v => {
        return {
          name: v,
          value: sexRateData.data[v]
        }
      })
    },
    // 求职者学历占比处理
    handleEducationRateData (educationRateData) {
      this.education.series[0].data = Object.keys(educationRateData.data).map(v => {
        return {
          name: v,
          value: educationRateData.data[v]
        }
      })
    },
    // 求职者分布处理
    handleMapData (mapData) {
      let obj = mapData.data;
      this.flag = true;
      this.mapData = Object.keys(obj).map(val => {
        return {
          name: val,
          value: obj[val]
        }
      })
      this.mapName = Object.keys(obj);
      this.mapMax = this.mapData.sort((a, b) => b.value - a.value)[0].value;
    },
    // 求职者薪酬处理
    handleSalaryData (salaryData) {
      this.salary.series[0].data = Object.keys(salaryData.data).map(v => {
        return {
          name: v,
          value: salaryData.data[v]
        }
      })
    }
  }
}
</script>
<style scoped>
.container {
    background: #080850;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
/* echarts 图表样式 */
.echarts_container {
    margin-top: 20px;
}
.middle_col {
    margin-left: 8px;
    margin-right: 8px;
}
.mt16 {
    margin-top: 16px;
}
.map_card {
    margin-top: 24px;
}

.map_card .map_header {
    display: inline-block;
    min-width: 184px;
    height: 32px;
    padding-right: 15px;
    line-height: 32px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    text-indent: 15px;
    /* margin: 18px 0 0 18px; */
    display: inline-block;
    border: 1px dashed #ffffff;
    background: url(../../../../assets/img/gradientImg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#echarts_sex,
#echarts_age,
#echarts_education,
#echarts_bar1,
#echarts_bar2,
#echarts_salary {
    height: 270px;
}
</style> 